<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>慧品会</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/index.css" />
		<link rel="stylesheet" href="../../css/swiper.min.css" />
		<script type="text/javascript" src="../../js/swiper.min.js"></script>
		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			[v-clock] {
				display: none;
			}
			
			.q_box {
				overflow: hidden;
				background: #ffffff;
				padding: 5px;
			}
		</style>
	</head>

	<body style="background: #F5F5F5;">
		<div class="z" id="hph_home" v-clock>
			<div class="z_center">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="o in banner">
							<img :src="o" />
						</div>
					</div>

					<!-- 轮播点点 -->
					<div class="swiper-pagination"></div>
				</div>
				<div class="sou">
					<input type="text" placeholder="面膜" />
					<img src="../../images/sousuo.png" class="s_icon" />
					<a href="">
						<img src="../../images/xiaoxi.png" class="x_icon" />
					</a>
				</div>
				<!--专栏导航-->
				<div class="zt" id="http://hui.93px.com/mobile/categorys.php?id=1&tid=">
					<div v-for="o in res.navs">
						<img src="../../images/baobao.png" class="xiani" />
						<p class="zms">{{o.name}}</p>

					</div>
				</div>
				<div class="temai">限时特卖</div>
				<div class="kong">
					<div class="juli">
						<div>
							<a>
								<img src="../../images/ms.jpg" class="bfb" />
							</a>
						</div>
						<div class="cp">
							<a id="shopping_show.html" class="k1" v-for="o in res.xianshi">
								<div>
									<img :src="o.goods_img" class="bfb" />
									<p class="sbt">{{o.name}}</p>
									<p class="price" v-html="o.shop_price"></p>
								</div>
							</a>
						</div>
					</div>
					<!--v-if="i == 0"-->
					<div class="q_box" v-for="o,i in res.new_goods">
						<img :src="o.goods_img" class="xt" />
						<div class="fr">
							<p class="ms">{{o.name}}</p>
							<p class="qi">
								<span class="price2" v-html="o.shop_price"></span>
								<a href="javascript:void(0);" class="qiang">马上抢</a>
							</p>
						</div>
					</div>
					<div class="juli">
						<div>
							<a href="javascript:void(0);">
								<img src="../../images/msa.jpg" class="bfb" />
							</a>
						</div>
						<div class="cp">
							<a href="javascript:void(0);" class="k1" v-for="o in res.hot_goods">
								<div>
									<img :src="o.goods_img" class="bfb" />
									<p class="sbt">{{o.name}}</p>
									<p class="price" v-html="o.shop_price"></p>
								</div>
							</a>
						</div>
					</div>
				</div>

			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script>
			var vm = new Vue({
				el: "#hph_home",
				data: {
					res: {

					},
					banner: [
						"../../images/banner1.jpg",
						"../../images/banner2.jpg",
						"../../images/banner3.jpg",
					]
				},
				methods: {
					_init: function() {
						$.ajax({
							url: "http://hui.93px.com/mobile/apiindex.php",

							success: function(res) {
								res = $.parseJSON(res);
								vm.res = res;

								setTimeout(function() {
									var swiper = new Swiper('.swiper-container', {
										centeredSlides: true,
										loop: true,
										autoplay: {
											delay: 3000,
											disableOnInteraction: false,
										},
										pagination: {
											el: '.swiper-pagination',
											clickable: true,
										},
									});
								}, 200)

							},
							error: function(xhr, type, errorThrown) {
								alert(type);
								console.log(type);
							},
						});
					}
				}
			});

			vm._init();
			mui("#hph_home").on("tap", ".zt", function() {
				var url = this.getAttribute("id"); //getAttribute()获取属性函数
				mui.openWindow({
					url: url,
					id: url,
					styles: {
						top: '0px', //新页面顶部位置
						bottom: '0px', //新页面底部位置
						popGesture: 'close'
					},
					extras: {},
					waiting: {
						autoShow: false
					}
				})
			});
		</script>
	</body>

</html>